import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {connect} from 'react-redux'
import {Toast} from 'antd-mobile'
import AlipayJSOperation from '../../utils/alipayJSOperation';
import {getOrderInfo, orderPay, useCoupon} from '../../actions/comfirmOrderAction'
import {getWeixinConfig} from '../../actions/homeAction';
import InputItem from '../../components/confirmOrder/inputItem';
import style from './index.scss';
import PageBar from '../../components/common/pageBar';
import typeOfBrowser from '../../utils/typeOfBrowser';
import SendCxytjMessage from '../../utils/sendCxytjMessage';
/*import ToolTip from '../../components/common/toolTip';*/
import ReModal from '../../components/common/reModal';
import ItemWithRightArrow from '../../components/common/itemWithRightArrow';
import CheckItemList from '../../components/common/checkItemList';
import TitleAndDetail from '../../components/confirmOrder/titleAndDetail';
import CouponDiscount from '../../components/confirmOrder/couponDiscount';
import VipDiscount from '../../components/confirmOrder/vipDiscount';
import ItemList from '../../components/common/itemList';
import AccountDetail from '../../components/confirmOrder/accountDetail';
import CkeckBox from '../../components/common/checkBox/checkBoxItem';
import AddressPicker from '../../components/confirmOrder/addressPicker';
import TipsBar from '../../components/Home/tipsBar';

class ConfirmOrder extends Component {
    constructor(props) {
        super(props);

        this.state = {
            vipCard: false, //新开通车务卡开关
            finalDiscount: 0,//最终优惠额度
            finalAccount: 0,//最终价格
            payType: props.payTypes[0], //默认支付类型
            alertNum: 0, //0: 已购买车务卡说明 1: 未购买车务卡说明
            orderId: '',//订单id
            orderToken: '',//订单支付token
            linkMan: '',
            telephone: '',
            payTypes: [],//支付类型
            inspectionType: props.params.inspectionType ? props.params.inspectionType : 1,
            driveType: props.params.inspectionType == 2 ? 1 : null,//上线检默认传代驾，免检传null
            mailType: 'person',//资料寄递方式，默认自主寄送
            orderAddressArray: [],//缓存当前选择结果，用于跳转到其他页面后的数据恢复
            accountDetailTipsStyle: style.accountDetailTips,
            walletTips: '',//钱包支付金额不足提示语句
            walletIcon:'./images/wallet_unable.png',//钱包支付图标
            walletEnable:true,//钱包是否可选中
        };
        this.initDefault = true;//是否向后端发送重新初始化优惠券请求

        //当前经纬度
       /* this.location = {
            longitude: '',
            latitude: '',
        };*/
        this.orderAddressCode = ''//选中的办理地址;
        this.driveTypeDic = null;//车检方式对照表
        this.mailTypeDic = null;//寄递方式对照表
        this.detailReload = this.detailReload.bind(this);
        /*this.changeMailType = this.changeMailType.bind(this);*/
        this.orderPay = this.orderPay.bind(this);
        this.goToProcessDetail = this.goToProcessDetail.bind(this);
        this.renderTipsItem = this.renderTipsItem.bind(this);
        this.showTips = this.showTips.bind(this);
        this.changeTipsStyle = this.changeTipsStyle.bind(this);
        //尽可能快的屏蔽微信分享
        this.WeXinOperation();
        //获取并缓存当前位置
        //this.getLocation();
        window.addEventListener('scroll', this.changeTipsStyle, false);
    }

    changeTipsStyle() {
        if (this.refs.accountDetail) {
            let accountDetailToTop = document.body.clientHeight - ReactDOM.findDOMNode(this.refs.accountDetail).offsetHeight - ReactDOM.findDOMNode(this.refs.accountDetail).getBoundingClientRect().top;
            if (accountDetailToTop <= 100) {
                this.setState({
                    accountDetailTipsStyle: style.accountDetailTips + ' ' + style.fixedAccountTips
                });
            }
            else {
                this.setState({
                    accountDetailTipsStyle: style.accountDetailTips
                });
            }
        }
    }

    //获取当前位置
  /*  getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(location => {
                if (location.coords.longitude && location.coords.latitude) {
                    this.location.latitude = location.coords.latitude;
                    this.location.longitude = location.coords.longitude;
                }
            });
        }
    }*/


    toUrl(url) {
        this.context.router.push(url);
    }

    //跳转到优惠券列表
    goToCoupon() {
        var url = this.constructCouponUrl();
        this.initDefault = false;
        if (this.props.orderInfo.couponCount > 0) {
            //保存当前状态
            this.saveState();
            this.toUrl(url);
        }
    }

    /**
     * 设置支付类型
     * @param type 支付类型
     */
    setPayType(type) {
        this.setState({
            payType: type
        });
    }

    //根据终端类型展示不同的支付通道
    changePayTypesByClient() {
        let userChannel = typeOfBrowser.getChannelOfBrowser();
        if (userChannel == 'aliPay') {
            this.setState({
                payTypes: [],
                payType: this.props.payTypes[0]
            })
        }
        else if (userChannel == 'weixin') {
            this.setState({
                payTypes: [],
                payType: this.props.payTypes[1]
            })
        }
        else if (userChannel == 'qq') {
            this.setState({
                payTypes: [],
                payType: {
                    name: 'qq',
                    type: '4',
                }
            })
        }
        else if (userChannel == 'app') {
            //疑似跟其他setState操作冲突，导致无法更新状态，估排到队列最后执行
            setTimeout(() => {
                this.setState({
                    payTypes: this.props.payTypes,
                })
            }, 0);
        }
        //天猫商城和我的爱车默认支付宝支付
        else if (sessionStorage.getItem('userType') == 'SJTB2017' || sessionStorage.getItem('userType') == 'CXYTMALL') {
            this.setState({
                payTypes: [],
                payType: this.props.payTypes[0]
            })
        }
        //京东金融默认京东支付
        else if (sessionStorage.getItem('userType') == 'jindongns2016') {
            this.setState({
                payTypes: [],
                payType: {
                    name: 'jingdong',
                    type: '27',
                }
            })
        }
        else {
            setTimeout(() => {
                this.setState({
                    payTypes: this.props.payTypes,
                })
            }, 0);
        }

    }

    componentWillMount() {
        document.querySelector("title").innerHTML = "订单确认";
    }

    //发送选项埋点数据
    sendTypeMessage() {
        let eventId = '';
        if (this.props.params.inspectionType == '1') {
            if (this.state.mailType == 'person') {
                eventId = 'H5_E_Orderpage_online_ChooseSelfsend';
            }
            else {
                eventId = 'H5_E_Orderpage_online_ChooseEMS';
            }
        }
        else {
            if (this.state.driveType == '1') {
                eventId = 'H5_E_Orderpage_ChooseOtherDriving';
            }
            else {
                eventId = 'H5_E_Orderpage_ChooseSelfDriving';
            }
        }
        SendCxytjMessage.sendMessage({eventId: eventId});
    }

    //发送选项tips点击埋点
    sendTipsMessage() {
        let eventId = '';
        if (this.props.params.inspectionType == '1') {
            if (this.state.mailType == 'person') {
                eventId = 'H5_E_Orderpage_online_ClickSelfsendtip';
            }
            else {
                eventId = 'H5_E_Orderpage_online_ClickEMStip';
            }
        }
        else {
            if (this.state.driveType == '1') {
                eventId = 'H5_E_Orderpage_ClickOtherDrivingtip';
            }
            else {
                eventId = 'H5_E_Orderpage_ClickSelfDrivingtip';
            }
        }
        SendCxytjMessage.sendMessage({eventId: eventId});
    }

    //切换车检方式和资料寄递方式之后回调重新加载数据
    detailReload(index) {
        let inspectionType = this.props.params.inspectionType;
        let mailType = this.props.params.inspectionType == '1' ? this.mailTypeDic[index] : this.state.mailType;
        let driveType = this.props.params.inspectionType == '2' ? this.driveTypeDic[index] : this.state.driveType;
        this.setState({
            inspectionType: inspectionType,
            driveType: driveType,
            mailType: mailType,
        });
        this.props.dispatch(getOrderInfo({
            carNumber: this.props.currentCarNumber ? this.props.currentCarNumber : decodeURIComponent(this.props.params.carNumber),
            carId: this.props.carId ? this.props.carId : this.props.params.carId,
            inspectionType: inspectionType,
            driveType: driveType,
            mailType: mailType,
            couponIds: this.props.useCoupon.couponId,
            regionCode: this.orderAddressCode,
        }, () => {
            this.computeFinalResult();
        }));
        //发送埋点
        this.sendTypeMessage();
    }

    //发送进入的埋点请求
    sendInitMessage() {
        let eventId = this.props.params.inspectionType == 1 ? 'H5_P_Interspection_EnterOrderpage_online' : 'H5_P_Interspection_EnterOrderpage';
        SendCxytjMessage.sendMessage({eventId: eventId});
    }

    componentDidMount() {
        /*this.setLocalUserChannel();*/
        this.changePayTypesByClient();
        //隐藏标题栏右键
        AlipayJSOperation.setRightButtonStatus(false);
        //设置标题
        AlipayJSOperation.setTitle('订单确认');
        AlipayJSOperation.removeLeftButtonEvent();
        //设置标题颜色
        //AlipayJSOperation.setBarColor('#2FB3FE');

        //从session恢复数据
        let confirmOrderState = sessionStorage.getItem("confirmOrderState"); //当前组件的状态
        if (confirmOrderState && confirmOrderState != 'undefined') {
            //重新初始化对照表
            this.initTypeDic();
            let orignState = JSON.parse(confirmOrderState);
            this.setState(
                Object.assign({}, this.state, orignState)
            ); //还原用户信息状态
            this.orderAddressCode = orignState.orderAddressArray[1];
            sessionStorage.removeItem("confirmOrderState");
        }

        //此处将操作置于队列的最后，防止取到未完全更新的state导致错误
        setTimeout(() => {
            this.getOrderDetail(() => {
                if (!(confirmOrderState && confirmOrderState != 'undefined')) {
                    //获取默认优惠券
                    if (this.props.orderInfo.couponCount > 0) {
                        this.props.dispatch(useCoupon({
                            discount: this.props.orderInfo.defaultCouponDiscount,
                            couponId: this.props.orderInfo.defaultCouponId
                        }));
                    }
                    else {
                        //不默认选中优惠券
                        this.props.dispatch(useCoupon({discount: 0, couponId: ''}));
                    }
                    this.getInitUserMessage();
                }
                this.computeFinalResult();
            });
        }, 0);
        this.sendInitMessage();
    }

    //获取订单页面相关数据
    getOrderDetail(callBack) {
        this.props.dispatch(getOrderInfo({
            carNumber: this.props.currentCarNumber ? this.props.currentCarNumber : decodeURIComponent(this.props.params.carNumber),
            carId: this.props.carId ? this.props.carId : this.props.params.carId,
            inspectionType: this.state.inspectionType,
            driveType: this.state.inspectionType == '2' ? this.state.driveType : '',
            mailType: this.state.inspectionType == '1' ? this.state.mailType : '',
            couponIds: this.props.useCoupon.couponId,
            regionCode: this.orderAddressCode,
        }, () => {
            callBack && callBack();
        }));
    }

    //初始化车检方式和寄递方式对照表，通过tips字段的typename构建当前化车检方式和寄递方式的对照
    initTypeDic() {
        let dicCache = {};
        for (var i = 0; i < this.props.orderInfo.tips.length; i++) {
            dicCache[i] = this.props.orderInfo.tips[i].typeName;
        }
        if (this.props.orderInfo.inspectionType == '1') {
            this.mailTypeDic = dicCache;
        }
        else {
            this.driveTypeDic = dicCache;
        }
    }

    getInitUserMessage() {
        //首次加载时初始化当前办理城市编码
        if (this.props.orderInfo.regionData&&this.props.orderInfo.regionData.initCode&&this.state.inspectionType == 2 && this.orderAddressCode == '') {
            this.setOrderCityCode(this.props.orderInfo.regionData.initCode);
        }

        this.initTypeDic();
        this.setState({
            telephone: this.props.orderInfo.userPhone,
            linkMan: this.props.orderInfo.userName,
            inspectionType: this.props.orderInfo.inspectionType,
            driveType: this.props.orderInfo.driveType,
            mailType: this.props.orderInfo.mailType,
        });
    }

    componentWillUnmount() {
        this.initDefault && this.props.dispatch(useCoupon({discount: 0, couponIndex: -1, couponId: 'default'}));
    }

    //构建跳转优惠券列表url
    constructCouponUrl() {
        return '/coupon/' + (this.props.useCoupon && this.props.useCoupon.couponId != undefined ? this.props.useCoupon.couponId : '');
    }

    //计算总计金额
    computeFinalResult() {
        this.setState({
            finalDiscount: this.props.orderInfo.allDiscount,
            finalAccount: this.props.orderInfo.payAmount,
            walletTips:this.props.orderInfo.payAmount>this.props.orderInfo.walletBalance?`（余额不足，剩余￥${this.props.orderInfo.walletBalance}）`:`（剩余￥${this.props.orderInfo.walletBalance}）`,
            walletIcon:this.props.orderInfo.payAmount>this.props.orderInfo.walletBalance?'./images/wallet_unable.png':'./images/wallet.png'
        });
    }

    //提交前检测
    beforeSubmit() {
        var pattern = /^[a-zA-Z\u4E00-\u9FA5]+$/;
        if (!this.state.linkMan || !pattern.test(this.state.linkMan)) {
            Toast.info('联系人只能输入英文字母和中文并且不能为空', 2);
            return false;
        }

        var pattern = /^[\d]{11}$/;
        if (!pattern.test(this.state.telephone)) {
            Toast.info('请输入11位手机号码', 2);
            return false;
        }
        //上线检验证办理地区
        if (this.props.orderInfo.inspectionType == '2' && !this.orderAddressCode) {
            Toast.info('请选择车辆所在地', 2);
            return false;
        }
        //检测钱包余额
        if(this.props.orderInfo.payAmount>this.props.orderInfo.walletBalance){
            Toast.info('钱包余额不足', 2);
        }
        return true;
    }

    //创建订单
    orderPay() {
        if (this.beforeSubmit()) {
            this.props.dispatch(orderPay({
                carNumber: this.props.currentCarNumber ? this.props.currentCarNumber : decodeURIComponent(this.props.params.carNumber),
                carId: this.props.carId ? this.props.carId : this.props.params.carId,
                linkMan: this.state.linkMan,
                telephone: this.state.telephone,
                orderTitle: this.props.orderInfo.inspectionType == 2 ? '车辆上线检测代办服务' : '六年内新车年检代办服务',
                orderDesc: '',
                orderAmount: this.state.finalAccount,
                totalCollect: 0,
                totalPoundage: this.props.orderInfo.price,
                discountAmount: 0,
                orderAddFees1: 0,
                orderAddFees2: 0,
                payAmount: this.state.finalAccount,
                payType: this.state.payType.type,
                buyVipCard: '2',
                couponIds: this.props.useCoupon.couponId,
                chewuIds: this.props.useCoupon.couponId ? '' : this.props.orderInfo.chewuId,//以优惠券为准，有优惠券车务卡id空
                inspectionType: this.props.orderInfo.inspectionType,
                driveType: this.props.orderInfo.inspectionType == '2' ? this.state.driveType : '',
                mailType: this.props.orderInfo.inspectionType == '1' ? this.state.mailType : '',//邮寄方式
                regionCode: this.orderAddressCode,//年检地址
            }));
        }
        //发送提交订单埋点
        let eventId = this.props.params.inspectionType == 1 ? 'H5_E_Orderpage_online_ClickPay' : 'H5_E_Orderpage_ClickPay';
        SendCxytjMessage.sendMessage({eventId: eventId});

        //发送支付方式埋点
        SendCxytjMessage.sendMessage({
            eventId: this.state.payType.type == 2 ? 'H5_E_Interspection_Choosealipay' : 'H5_E_Interspection_Choosewepay',
        });
    }


    //保存当前状态
    saveState() {
        sessionStorage.setItem("confirmOrderState", JSON.stringify({
            linkMan: this.state.linkMan,
            telephone: this.state.telephone,
            inspectionType: this.state.inspectionType,
            driveType: this.state.driveType,
            mailType: this.state.mailType,
            orderAddressArray: this.state.orderAddressArray,
        }));
    }


    goToProcessDetail() {
        //保存当前状态
        this.saveState();
        this.initDefault = false;
        let url = `/serviceDetail/${this.state.inspectionType}`;
        let eventId = this.state.inspectionType == 1 ? 'Insepection_ViewExemptionProcess' : 'Insepection_ViewOnlineProcess';
        this.toUrl(url);
        SendCxytjMessage.sendMessage({eventId: eventId});
    }


    WeiXinConfig(config) {
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: config.appId, // 必填，公众号的唯一标识
            timestamp: config.timestamp, // 必填，生成签名的时间戳
            nonceStr: config.nonceStr, // 必填，生成签名的随机串
            signature: config.signature,// 必填，签名，见附录1
            jsApiList: ['hideOptionMenu', 'closeWindow'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(() => {
            wx.hideOptionMenu();
        });
    }

    //微信屏蔽分享功能
    WeXinOperation() {
        if (typeOfBrowser.getChannelOfBrowser() == 'weixin') {
            this.props.dispatch(getWeixinConfig({signUrl: location.href}, (result) => {
                this.WeiXinConfig(result);
                //切换页面时再次触发微信配置
                window.addEventListener('hashchange', (e) => {
                    this.WeiXinConfig(result);
                }, false);
            }))
        }
    }

    //渲染支付方式
    renderPayTypes() {
        //当钱包金额不够时，重置支付方式
        if(this.props.orderInfo.payAmount>this.props.orderInfo.walletBalance&&this.state.payType.name=='wallet'){
            this.setPayType(this.state.payTypes[0]);
        }
        return this.state.payTypes.map((item, i) => {
            let canCheck=item.name!='wallet'||(item.name=='wallet'&&this.props.orderInfo.payAmount<=this.props.orderInfo.walletBalance);
                return <div key={item.name} className={style.payTypeItem}>
                    <img className={style.payTypeIcon} src={item.name=='wallet'?this.state.walletIcon:item.icon}/>
                    <div className={style.payTypeTitle}><span>{item.title}</span>{item.name == 'wallet'?<span>{this.state.walletTips}</span>:''}</div>
                    <CkeckBox checked={i == 0} type="radio" checkedCallBack={() => {
                        this.setPayType(item)
                    }} forceChecked={this.state.payType.name === item.name} enable={canCheck}/>

                </div>
            }
        )
    }


    renderTipsItem(requirements) {
        return <ul>
            {requirements.map((item, i) => {
                    return <li>
                        <span>{item.requirement}</span>
                    </li>
                }
            )}
        </ul>
    }

    //显示寄递方式或车检方式
    showTips(requirements) {
        let items = this.renderTipsItem(requirements);
        ReModal.showComponent(<div className={style.alertContentContainer}>
            <div className={style.title}>准备材料</div>
            {items}
            <button onClick={() => {
                ReModal.close()
            }}>已知晓
            </button>
        </div>);
        //发送埋点
        this.sendTipsMessage();
    }


    /*    changeMailType(i) {
     if (this.props.orderInfo.mailTypeList[i].mailType == 'ems') {
     ToolTip.show();
     }
     else {
     ToolTip.hide();
     }
     this.setState({
     mailType: this.props.orderInfo.mailTypeList[i].mailType
     });
     }*/

    //获取当前寄递方式和车检方式选中项的编号
    getCurrentTypeIndex() {
        let dataCache = this.props.orderInfo.inspectionType == '1' ? this.mailTypeDic : this.driveTypeDic;
        let currentType = this.props.orderInfo.inspectionType == '1' ? this.state.mailType : this.state.driveType;
        let currentTypeIndex = 0;
        for (var i in dataCache) {
            if (dataCache[i] == currentType) {
                currentTypeIndex = parseInt(i);
                break;
            }
        }

        return currentTypeIndex;
    }

    //剔除空的项
    filterEmpty(requirements){
        let result=[];
        for(let item of requirements){
            if(item.requirement){
                result.push(item);
            }
        }
        return result;
    }

    //渲染寄递方式和车检方式
    renderMailAndDriveType() {
        if(this.props.orderInfo.inspectionType == '1') {
            let initVlaue = this.getCurrentTypeIndex();
            return <CheckItemList checkedCallBack={this.detailReload} initValue={initVlaue}>
                {this.props.orderInfo.tips && this.props.orderInfo.tips.map((item, i) => {
                    return <TitleAndDetail key={'titleAndDetail' + i} title={item.title} content={item.content}
                                           showIcon={true} iconClick={() => {
                        this.showTips(this.filterEmpty(item.requirements));
                    }}/>
                })}
            </CheckItemList>;
        }
    }



    /*getToolTipClass() {
     return navigator.userAgent.indexOf("appname_cxycwz") > -1 ? 'toolTipContainer appAdapt' : 'toolTipContainer';
     }*/

    //获取城市编码
    setOrderCityCode(cityArray) {
        //this.state.orderAddressArray为空时是第一次选择地区，此时将couponId设置为default,从后端获取默认优惠券
        if(this.state.orderAddressArray.length==0){
            this.props.dispatch(useCoupon({
                discount: 0,
                couponId: 'default'
            }))
        }
        setTimeout(()=>{
            this.setState({
                orderAddressArray: cityArray,
                //切换城市后，将状态设置为初始状态
                driveType: this.props.params.inspectionType == 2 ? 1 : null,//上线检默认传代驾，免检传null
                mailType: 'person',//资料寄递方式，默认自主寄送
            });
            this.orderAddressCode = cityArray[1] ? cityArray[1] : cityArray[0] ? cityArray[0] : '';
            this.getOrderDetail(() => {
                //改变城市后寄送方式和寄递方式数量会改变，此处重新初始化对照表
                this.initTypeDic();
                this.computeFinalResult();
                //获取默认优惠券
                if (this.props.orderInfo.couponCount > 0) {
                    this.props.dispatch(useCoupon({
                        discount: this.props.orderInfo.defaultCouponDiscount,
                        couponId: this.props.orderInfo.defaultCouponId
                    }));
                }
                else {
                    //不默认选中优惠券
                    this.props.dispatch(useCoupon({discount: 0, couponId: ''}));
                }
            });
        },0);

        //发送埋点
        SendCxytjMessage.sendMessage({
            eventId: 'H5_E_Orderpage_Choosearea',
            attr1: this.props.params.inspectionType //属性1
        });
    }

    //选择的地址格式修改，仅显示城市名称
    filterAddress(address) {
        let addressArray = address.split(',');
        return addressArray.length > 1 ? addressArray[1] : addressArray[0];
    }

    //跳转到服务费用说明
    goToInstructions() {
        //发送埋点
        SendCxytjMessage.sendMessage({
            eventId: 'H5_E_Orderpage_Clickcheckcost',
            attr1: '点击查看检测费用' //属性1
        });

        this.initDefault = false;
        this.saveState();
        this.toUrl('/chargeInstructions');
    }

    render() {
        const PickerContent = props => (
            <ItemWithRightArrow onClick={props.onClick}>
                <div className={style.pickerContainer}>
                    <div className={style.leftItem}>
                        <div>当前车辆所在地</div>
                        <div>请确保车辆在该地区内，否则无法取车办理</div>
                    </div>
                    <div
                        className={props.extra == '请选择' ? style.rightItem + ' ' + style.blueBorder : style.rightItem}>{this.filterAddress(props.extra)}</div>
                </div>
            </ItemWithRightArrow>
        );
        const orderTip=this.props.orderInfo.orderTip?this.props.orderInfo.orderTip:'';
        return (
         
            <div className={style.confirmOrderContainer}>
                <PageBar title="订单确认" />
                <TipsBar text={orderTip} />
                {/*  <div className={this.getToolTipClass()}>
                 <ToolTip text="仅支持广东省内上门收件"/>
                 </div>*/}
                <div className={style.tips}>请输入年检代办所需信息，您的信息将严格保密</div>
                {/*用户信息 start*/}
                <ItemList borderPaddingLeft="14px" borderPaddingRight="14px">
                    <InputItem type="text" itemText="联系人" maxLength="12" placeHolder="请输入您的姓名"
                               value={this.state.linkMan} onChange={(e) => {
                        this.setState({linkMan: e.target.value})
                    }}/>
                    <InputItem type="text" itemText="手机号码" maxLength="11" placeHolder="请输入您的手机号码"
                               value={this.state.telephone} onChange={(e) => {
                        this.setState({telephone: e.target.value})
                    }}/>
                </ItemList>

                {/*跳转到办理详情 start*/}

                <div className={style.inspectionTypeItems + ' ' + style.itemMarginTop} onClick={this.goToProcessDetail}>
                    <ItemWithRightArrow>
                        <div className={style.inspectionTypeItem}>
                            <span>{(this.state.inspectionType == 2 ? '车辆上线检测代办服务（' : '六年内新车年检代办服务（') + (this.props.currentCarNumber ? this.props.currentCarNumber : decodeURIComponent(this.props.params.carNumber)) + '）'}</span>
                        </div>
                        <div className={style.inspectionTypeItem}>
                            <p>{this.state.inspectionType==1?'含年检代预约和代办理、环保标代办理等服务':'含年检代预约和代驾检测办理服务'}</p>
                        </div>
                    </ItemWithRightArrow>
                </div>
                {/*跳转到办理详情 end*/}

                <div className={style.itemMarginTop}>

                    {this.state.inspectionType == 2 ? <div className={style.pickerContent}>
                        <div className={style.picker}>
                            <AddressPicker
                                regionData={this.props.orderInfo.regionData ? this.props.orderInfo.regionData.regionList : []}
                                initialValue={this.state.orderAddressArray&&this.state.orderAddressArray.length != 0 ? this.state.orderAddressArray : (this.props.orderInfo.regionData ? this.props.orderInfo.regionData.initCode : [])}
                                colCount={2} onChange={(cityArray) => {
                                this.setOrderCityCode(cityArray)
                            }}>
                                <PickerContent></PickerContent>
                            </AddressPicker>
                        </div>
                    </div> : ''}
                    {/*此处屏蔽车检方式，默认只用代驾*/}
                    {
                        this.renderMailAndDriveType()
                    }
                </div>
                {/*用户信息 end*/}

                {/*优惠 start*/}
                {
                    this.props.orderInfo.showVip || this.props.orderInfo.showCoupon ?
                        <div className={style.itemMarginTop}>
                            <ItemList borderPaddingLeft="14px" borderPaddingRight="14px">
                                {this.props.orderInfo.showCoupon ?
                                    <CouponDiscount couponDiscount={this.props.useCoupon.discount}
                                                    couponCount={this.props.orderInfo.couponCount} goToCoupon={() => {
                                        this.goToCoupon()
                                    }}/> : ''}
                                {this.props.orderInfo.isVip ?
                                    <VipDiscount couponDiscount={this.props.useCoupon.discount}
                                                 isVip={this.props.orderInfo.isVip}
                                                 vipDiscount={this.props.orderInfo.discount}/> : ''}

                            </ItemList>
                        </div> : ''
                }

                {/*优惠 end*/}

                {/*价格明细 start*/}
                <AccountDetail ref="accountDetail" isVip={this.props.orderInfo.isVip}
                               couponDiscount={this.props.useCoupon.discount}
                               price={this.props.orderInfo.price} vipDiscount={this.props.orderInfo.discount}
                               activityDiscount={this.props.orderInfo.activityDiscount}
                               activityTitle={this.props.orderInfo.activityTitle}/>
                {/*价格明细 end*/}

                {this.state.inspectionType == 2 ?
                    <div className={this.state.accountDetailTipsStyle} onClick={this.goToInstructions.bind(this)}>
                        <div>温馨提示：订单费用仅包含服务费，验车费由工作人员验车后凭监测站发票实际金额当面收取<span className={style.wordLine}>查看检测费用</span><span>></span></div>
                    </div> : ''}
                {/*浮动时需要有东西垫底*/}
                {

                    this.state.accountDetailTipsStyle == style.accountDetailTips + ' ' + style.fixedAccountTips && this.state.payTypes.length == 0 ?
                        <div className={style.emptyTips}></div> : ''
                }
                {/*支付类型 start*/}
                <div className={style.payType}>
                    {
                        this.renderPayTypes()
                    }
                </div>

                {/*支付类型 end*/}


                {/*支付订单按钮 start*/}
                <div style={{height: '1.24rem'}}></div>
                <div className={style.payButtonBox}>
                    <div className={style.payButtonMoney}>
                        <span>{'合计¥ ' + this.state.finalAccount}</span>
                        {this.state.finalDiscount > 0 ?
                            <span>{'(已减免¥ ' + (this.props.orderInfo.price > this.state.finalDiscount ? this.state.finalDiscount : this.props.orderInfo.price) + ')'}</span> : ''}
                    </div>
                    <button className={style.payButton} onClick={this.orderPay}>去支付</button>
                </div>
                {/*支付订单按钮 end*/}
            </div>
        )
    }
}

//使用context
ConfirmOrder.contextTypes = {
    router: React.PropTypes.object.isRequired
};

ConfirmOrder.defaultProps = {
    payTypes: [
        {
            name: 'alipay',
            title: '支付宝支付',
            icon: './images/alipay-icon.png',
            type: '2',
        },
        {
            name: 'weixin',
            title: "微信支付",
            icon: './images/weixin-icon.png',
            type: '3',
        }
        , {
            name: 'wallet',
            title: '钱包支付',
            icon: './images/wallet_unable.png',
            type: '13',
        }
    ],
    orderInfo: {},
    useCoupon: {
        discount: 0
    }
};

function mapStateToProps(state) {
    return Object.assign({}, state.comfirmOrder, {
        currentCarNumber: state.homeInfo && state.homeInfo.carList && state.homeInfo.carList.cars ? state.homeInfo.carList.cars[state.homeInfo.currentCarIndex].carNumber : null,
        carId: state.homeInfo && state.homeInfo.carList && state.homeInfo.carList.cars ? state.homeInfo.carList.cars[state.homeInfo.currentCarIndex].carId : null
    });
}


export default connect(mapStateToProps)(ConfirmOrder)